<template>
  <div class="touch">
    <nav class="touch-moves">
      <template v-if="!isMobi">
        <a-tag
          @mousedown="onMousedown"
          :color="v.title"
          v-for="(v, k) in moves"
          :key="'tag' + k"
          >pc-{{ v.title }}</a-tag
        >
      </template>
      <template v-else>
        <a-tag
          @touchstart="onTouchstart"
          :color="v.title"
          v-for="(v, k) in moves"
          :key="'taged' + k"
          >mobi-{{ v.title }}</a-tag
        >
      </template>
    </nav>
    <div class="rl">
      <div id="rl-left">
        <div class="rl-left-item"></div>
      </div>
      <div>
        <com-map></com-map>
      </div>
      <div id="rl-right">
        <div class="rl-right-item"></div>
      </div>
    </div>
  </div>
</template>
    </nav>
  </div>
</template>

<script>
import comMap from "./map.vue";
export default {
  components: {
    comMap,
  },
  data() {
    return {
      moves: [
        {
          title: "pink",
          msg: "粉色",
        },
        {
          title: "skyblue",
          msg: "天蓝色",
        },
      ],
      isMobi: false,
      isDown: false,
      isStart: false,
      mouseDownXY: {
        x: undefined,
        y: undefined,
      },
    };
  },
  mounted() {
    //   判断设备 是移动端还是pc端
    if (/Mobi|Android|iPhone/i.test(window.navigator.userAgent)) {
      this.isMobi = true;
    } else {
      this.isMobi = false;
    }
    window.onresize = () => {
      if (/Mobi|Android|iPhone/i.test(window.navigator.userAgent)) {
        this.isMobi = true;
      } else {
        this.isMobi = false;
      }
    };
  },
  methods: {
    /**
     * touchstart  手机端事件
     * @param {Object} e 事件对象
     */
    onTouchstart(e) {
      this.isStart = true;
      this.removeDoms(); //调用删除 移动小块方法,每次按下删除全部的
      //记录,每次按下时 按下目标元素的x偏差
      //以及,按下目标元素的位置信息 用于过度效果
      this.mouseDownXY = {
        x: e.touches[0].clientX - e.target.offsetLeft,
        y: e.touches[0].clientY - e.target.offsetTop,
        ox: e.target.offsetLeft,
        oy: e.target.offsetTop,
      };
      e.preventDefault();
      let dom = e.target.cloneNode(true);
      dom.classList.add("addposition");
      document.body.appendChild(dom);
      dom.style.left = e.target.offsetLeft + "px";
      dom.style.top = e.target.offsetTop + "px";
      window.addEventListener("touchmove", this.onMove, false);
      window.addEventListener("touchend", this.onUp, false);
    },
    /**
     * mousedown  pc端事件
     * @param {Object} e 事件对象
     */
    onMousedown(e) {
      this.isDown = true;
      this.removeDoms();
      this.mouseDownXY = {
        x: e.clientX - e.target.getBoundingClientRect().left,
        y: e.clientY - e.target.getBoundingClientRect().top,
        ox: e.target.getBoundingClientRect().left,
        oy: e.target.getBoundingClientRect().top,
      };
      let dom = e.target.cloneNode(true);
      dom.classList.add("addposition");
      document.body.appendChild(dom);
      dom.style.left = this.mouseDownXY.ox + "px";
      dom.style.top = this.mouseDownXY.oy + "px";

      window.onmousemove = this.onMove;
      window.onmouseup = this.onUp;
    },

    /**
     * touch mouse 移动端pc端 移动方法(函数)
     * @param {Object} we 事件对象
     */
    onMove(we) {
      if (we.clientX ? this.isDown : this.isStart) {
        let dom = document.querySelector(".addposition");
        // 这里we.clientX 三目运算符,用于判断是touch还是mouse. 也就是判断是移动端还是pc端
        let movex =
          (we.clientX ? we.clientX : we.touches[0].clientX) -
          this.mouseDownXY.x +
          "px";
        let movey =
          (we.clientY ? we.clientY : we.touches[0].clientY) -
          this.mouseDownXY.y +
          document.documentElement.scrollTop +
          "px";
        dom.style.left = movex;
        dom.style.top = movey;
      }
    },

    /**
     * touch mouse 移动端pc端 抬起(手指离开)方法(函数)
     * @param {Object} e 事件对象
     */
    onUp(e) {
      this.isStart = false;
      let targetTop = document.querySelector(".rl").offsetTop;
      let targetH = document.querySelector(".rl").clientHeight;
      // let leftdom = document.querySelector("#rl-left");
      // let rightdom = document.querySelector("#rl-right");
      let leftdom = document.querySelector(".rl-left-item");
      let rightdom = document.querySelector(".rl-right-item");
      let dom = document.querySelector(".addposition");
      let leftDetail = {
        x: leftdom.getBoundingClientRect().left,
        y: leftdom.getBoundingClientRect().top,
        w: leftdom.clientWidth,
        h: leftdom.clientHeight,
      };
      let rightDetail = {
        x: rightdom.getBoundingClientRect().left,
        y: rightdom.getBoundingClientRect().top,
        w: rightdom.clientWidth,
        h: rightdom.clientHeight,
      };
      let domDetail = {
        x: dom.getBoundingClientRect().left,
        y: dom.getBoundingClientRect().top,
        w: dom.clientWidth,
        h: dom.clientHeight,
      };

      //   判断界限
      if (
        domDetail.y > targetTop &&
        domDetail.y <= targetH + targetTop - domDetail.h
      ) {
        if (
          domDetail.x >= rightDetail.x &&
          domDetail.x <= rightDetail.x + rightDetail.w - domDetail.w
        ) {
          document.body.removeChild(dom);
          alert("right");
        }
        if (
          domDetail.x >= leftDetail.x &&
          domDetail.x <= leftDetail.x + leftDetail.w - domDetail.w
        ) {
          document.body.removeChild(dom);
          alert("left");
        }
      }
      if (e.clientX) {
        window.onmouseup = null;
        window.onmousemove = null;
      } else {
        window.removeEventListener("touchend", this.onUp); //删除事件,addEventListener绑定的事件 要加上后面的函数
        window.removeEventListener("touchmove", this.onMove); //删除事件,addEventListener绑定的事件 要加上后面的函数
      }
      if (document.querySelector(".addposition")) {
        dom.style.transition = "all .3s linear";
        dom.style.left = this.mouseDownXY.ox + "px";
        dom.style.top = this.mouseDownXY.oy + "px";
        dom.addEventListener("transitionend", this.removeDom, false); //监听 过度结束
      }
    },

    /**
     * addEventListener("transitionend",fun) 该方法的函数
     * @param {Object} e 事件对象
     */
    removeDom(e) {
      e.target.removeEventListener("transitionend", this.removeDom); //删除 监听事件
      document.body.removeChild(document.querySelector(".addposition")); //删除dom元素
    },

    /**
     * 删除 所有移动元素方法
     */
    removeDoms() {
      let doms = [...document.querySelectorAll(".addposition")];
      doms.map((v) => {
        document.body.removeChild(v); //删除dom元素
      });
    },
  },
};
</script>

<style scoped>
.touch{
  position: relative;
  left: 100px;
}
.ant-tag {
  -webkit-touch-callout: none; /*系统默认菜单被禁用*/
  -webkit-user-select: none; /*webkit浏览器*/
  -khtml-user-select: none; /*早起浏览器*/
  -moz-user-select: none; /*火狐浏览器*/
  -ms-user-select: none; /*IE浏览器*/
  user-select: none; /*用户是否能够选中文本*/
}
.touch-moves {
  padding: 0px 100px;
  padding-top: 100px;
}
.rl {
  padding: 0px 20px;
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-top: 20px;
  height: 70vh;
}
.rl > div:nth-child(1),
.rl > div:nth-child(3) {
  width: 14%;
  text-align: center;
  line-height: 40px;
  position: relative;
}
.rl-left-item,.rl-right-item{
  position: absolute;
  top: 0px;
  width: 150%;
  height: 100%;
  z-index: 100;
}
.rl-left-item{
  left: 0px;
  background-image: linear-gradient(to right, rgba(251,194,235,.5) 0%, rgba(166,193,238,.5) 100%);
}
.rl-right-item{
  right: 0px;
  background-image: linear-gradient(to left, rgba(251,194,235,.5) 0%, rgba(166,193,238,.5) 100%);
}
.rl > div:nth-child(2) {
  flex: 1;
  position: relative;
  z-index: 99;
}
.addposition {
  position: absolute; 
  transition: none;
  z-index: 1000;
}
</style>